<template>
    <div>
        <header>
          <h1>源博客</h1>
          <!-- 导航栏 -->
          <div class="content">
            <router-link to="/blog/index" tag="div" >博客信息</router-link>
            <router-link to="/blog/myblog" tag="div" >我的博客</router-link>
            <router-link to="/blog/add/" tag="div">去写博客</router-link>
          </div>
          <!-- 搜索块 -->
          <div class="serch" icon="el-icon-search">
            <input type="text" placeholder="搜索" class="serchInput" v-model="mothed"  @keyup.enter="onEnterPress" > 
            <span icon="el-icon-search" class="el-icon-search" @click="onEnterPress"></span>
          </div>

          


          <div class="user">
            <!-- <router-link to="/blog/mine" tag="span"> -->
              <!-- <div>我的信息</div> 
               <div class="headImg">
                <img src="../../assets/a.jpg" alt="">
              </div> -->


            <el-popover
              placement="top-start"

              width="270"
              trigger="hover"
              content="">

              
              <!-- 我的信息页面 -->
              <mine :user="user"></mine>
              <div slot="reference" class="headDiv">
                <img :src="getimg(user.headImg)" class="headImg">
              </div>
            </el-popover>
            
            <div @click="clike">&nbsp;&nbsp;&nbsp;退出登录</div>
            <!-- <router-link to="/login" tag="div" >&nbsp;&nbsp;&nbsp;退出登录</router-link> -->
          </div>
        </header>

			  <transition mode="out-in" name="fade"> 

            <router-view></router-view>

        </transition>



        

    </div>
</template>

<script>
import { mapState } from 'vuex';
import mine from "../user/mine/mine.vue"
export default {
    data () {
      return {
        imgUrl:this.pathUrl.getImg,//获取图片
        loginUrl:this.pathUrl.loginUrl,//登录路径
        // loginUrl:"http://localhost:3003/api/user/login",
        token:"",
        mothed:"",//内容
        user:"",
      }
    },

    methods: {

        /**
         * 正确提醒
         */
        open2(message) {
                this.$message({
                showClose: true,
                message,
                type: 'success',
                duration:1500,
                });
        },
        /**
         * 错误提醒
         *  */    
        open4(message) {
                this.$message({
                showClose: true,
                message: message,
                type: 'error',
                duration:1500,
                });
            },
      /**
       * 获取到图片
       */
      getimg(img){
        return this.imgUrl+img
      },
      // 添加拦截器
      Interceptor(){
        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
          config.headers['Authorization']
            // 在发送请求之前做些什么
            return config;
          }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
          });
      },
      // 搜索事件
      onEnterPress(){
        this.$router.push(
          {
            name:"blogsearch",
            params:{mothed:this.mothed}
          })
        // location.reload()
		    // this.routerRefresh();
        // console.log("按回车了")
        console.log(this.mothed)
      },
      /**
       * 退出操作
       */
      clike(){
        console.log("清除数据")
        localStorage.clear()
        this.$router.push({path:'/login'})
      },
      /**
       * 登录，访问路径进行登录
        */ 
      login(){
        this.user=JSON.parse(localStorage.getItem("user")) 
            this.$axios.post(this.loginUrl,{
                        loginId:this.user.loginId,loginPassword:this.user.loginPassword
                })
            .then((resule)=>{
                // resule=JSON.parse(resule);
                this.user=resule.data.resule[0];
                // console.log(resule)
                // localStorage.getItem("token",resule.data.token)
                localStorage.setItem('user',JSON.stringify(this.user));
            })
      },

    },

    mounted:function(){
      console.log(this.pathUrl)
      this.login()
    },

    // 获取vuex里面的数据
    // computed:{
    //     user:{
    //       get:function(){//获取
    //         return this.$store.state.user
    //       },
    //       set:function(val){//修改,传入一个user类的对象
    //         this.$store.commit("setUser",val)
    //       }
    //     },
    // },
    
    // computer:mapState(['user']),//只有get，没有set

    // 路由守卫 
    beforeRouteEnter:function(to, from, next) {//进入组件前执行。
      const user = localStorage.getItem("user")
      console.log("beforeEach--------------------------")
      console.log(to,from)
      // var user = null
      console.log(user)
      console.log(user===null) //true
      if( user===null && to.path != '/login'){
        
        next({
          path:'/login',
        })
      }
      else{
        next()
      }
    },



    components: {
      mine
    },
}
</script>

<style scoped>

header{
  height: 110px;
  width: 100%;
  background: #ffffffff;
  border-bottom: 1px #bbbbbb solid;
  display: flex;
  flex-flow: nowrap;
  justify-content: space-around;
  align-items: center;
  /* padding: 0 10px 0 50px; */
  box-sizing: border-box;
  
}
header>h1{
  width: 15%;
  font-size: 30px;
  color: transparent;
  font-family: Modak;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='200px' height='200px' viewBox='0 0 400 400'%3e%3cdefs%3e%3cfilter id='filter' width='400px' height='400px' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-color='%23f5576c' flood-opacity='1' x='0' y='0' width='250px' height='250px' result='flood3'%3e%3c/feFlood%3e%3cfeFlood flood-color='%23f093fb' flood-opacity='1' x='150px' y='150px' width='250px' height='250px' result='flood4'%3e%3c/feFlood%3e%3cfeGaussianBlur stdDeviation='50 50' x='0%25' y='0%25' width='100%25' height='100%25' in='flood3' edgeMode='none' result='blur1'%3e%3c/feGaussianBlur%3e%3cfeGaussianBlur stdDeviation='50 50' x='0%25' y='0%25' width='100%25' height='100%25' in='flood4' edgeMode='none' result='blur2'%3e%3c/feGaussianBlur%3e%3cfeBlend mode='normal' x='0%25' y='0%25' width='100%25' height='100%25' in='blur2' in2='SourceGraphic' result='blend5'%3e%3c/feBlend%3e%3cfeBlend mode='normal' x='0%25' y='0%25' width='100%25' height='100%25' in='blur1' in2='blend5' result='blend6'%3e%3c/feBlend%3e%3c/filter%3e%3c/defs%3e%3crect width='400' height='400' x='0' y='0' fill='%23fee140' filter='url(%23filter)'%3e%3c/rect%3e%3c/svg%3e");
  -webkit-background-clip: text;
  text-align: center;
  text-shadow: 7px 7px 0px #d2d2d22e;
}
.content{
  width: 30%;
  height: 100%;
  flex-wrap: nowrap;
}
.content>div{
  /* color:#ea6f5a; */
  float: left;
  width: 33.33%;
  height: 110px;
  line-height: 110px;
  text-align: center;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
}
.active{
		background: #6cd4e2;
		font-weight: bold;
		color:#ffffff;
  }
  
.user{
  width: 30%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.user>div:last-child{
  font-size: 10px;

}
/* .headImg{
  height: 100%;
  margin: 0 5px;
  display: flex;
  align-items: center;
} */
.headImg{
  height: 60px;
  width: 60px;
  /* padding-bottom: 60px; */
  border: 1px solid #bbbbbb;
  border-radius: 50%;
  display: block;

}
.headImg:hover{
  height: 90px;
  width: 90px;
}
.headImg:hover{
  /* background: red; */
  position: relative;
}
.headImg:hover::after{
  display: block;
  content: "点击修改头像";
  position: absolute;
  height: 100%;
  width: 100%;
  /* bottom:50%;
  right: 50%; */
  z-index: 10000;
  /* transform: translate(50%,50%); */
}

.content>div:hover{
  background: #bbbbbb;
}
/* @keyframes roll{
    from{transform: translateY(0);background: #2C2C2C;;}
    to{transform: translateY(110px);}
}
.content>div{			
    animation: roll 1s linear infinite;
}
.runing{		
    animation-play-state: running;
}
.no{		
    animation-play-state:paused
} */


.serch{
  flex: 1;
  background: #eee;
  height: 30px;
  border-radius: 20px;
  padding: 0 10px 0 10px;
  overflow:hidden;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.serchInput{
  flex: 1;
  height: 100%;
  border: none;
  background: #eee;
  outline: none;

}
.serch>span:hover{
  cursor:pointer;
}


.fade-leave-active ,.fade-enter-active{
    transition: all 0.4s;
} 

.fade-enter{
    /* transform: translate3d(100%, 0, 0); */
    transform: translateX(-100%);
    /* transform: opacity 0%; */
    /* opacity: 100%; */
}
.fade-enter-to{
   transform: translateX(0%);
}
.fade-leave{
  transform: translateX(0%);
}
.fade-leave-to{
  transform: translateX(-100%);
}
</style>